<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarot Shop</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header-nav">
                <div class="header-wrapper">
                    <img src="img/logo.png" alt="" class="logo">
                    <div class="navigation">
                        <div class="nav-item" >main</div>
                        <a href="catalog/catalog.html">
                            <div class="nav-item">CATALOG</div>
                        </a>
                        <div class="nav-item">TAROT FEATURES</div>
                        <div class="nav-item">CONDITIONS OF SALE</div>
                        <div class="nav-item">quotes</div>
                        <a href="basket/basket.html"><div class="nav-item">buy</div></a>
                    </div>
                    <div class="header-links">
                        <img src="img/vk.png" alt="" class="link-item">
                        <img src="img/telegram.png" alt="" class="link-item">
                    </div>
                </div>
            </div>
            <div class="header-content">
                <div class="main-text">THE DEVIL'S PRIESTESS</div>
                <div class="main-subtitle">Get to know the whole truth</div>
                <button class="buy-btn">A tarot card from the legendary tarotologist for just $3.99</button>
            </div>
        </div>
        <div class="block1">
            <div class="block1-text">
                <div class="b1-whats">WHAT CAN I FIND HERE?</div>
                <div class="b1-answ">MAGIC TAROT<br>CATALOG</div>
                <div class="b1-right-text">
                    <p>
                        Collectible cards from rare author's decks, as well as new and increasingly popular tarot decks, exclusive Rider-Waite and Tarot of Manara, and many other decks...
                        Your deck is waiting for you
                    </p>
                </div>
            </div>
            <div class="carousel">
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE PRIESTESS</div>
                        <div class="num"></div>
                        <img src="img/карта1.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE LOVERS</div>
                        <div class="num"></div>
                        <img src="img/карта2.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE EMPRESS</div>
                        <div class="num"></div>
                        <img src="img/карта3.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE TEMPERANCE</div>
                        <div class="num"></div>
                        <img src="img/карта4.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE JUDGEMENT</div>
                        <div class="num"></div>
                        <img src="img/карта5.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE WORLD</div>
                        <div class="num"></div>
                        <img src="img/карта6.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE CHARIOT</div>
                        <div class="num"></div>
                        <img src="img/карта7.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE DEVIL</div>
                        <div class="num"></div>
                        <img src="img/карта8.jpg"  alt=""/>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-box">
                        <div class="carousel-title">THE TOWER</div>
                        <div class="num"></div>
                        <img src="img/карта9.jpg"  alt=""/>
                    </div>
                </div>
            </div>
        </div>
        <div class="block2">
            <div class="b2-wrapper">
                <div class="whats-special">what's so special?</div>
                <div class="features">features</div>
                <div class="feat-items">
                    <div class="feat-item">
                        <img src="img/r-fill.png" class="feat-item-ico"  alt=""/>
                        <div class="text-group">
                            <div class="feat-item-text">UNIQUE DECKS</div>
                            <div class="feat-item-desc">
                                Collections of different decks, ranging from the most popular to the author's ones, will allow you to find exactly the one that will reveal all the secrets.
                            </div>
                        </div>
                    </div>
                    <div class="feat-item">
                        <img src="img/r-empty.png" class="feat-item-ico"  alt=""/>
                        <div class="feat-item-text">AN OPPORTUNITY TO LEARN NEW THINGS</div>
                    </div>
                    <div class="feat-item">
                        <img src="img/r-empty.png" class="feat-item-ico"  alt=""/>
                        <div class="feat-item-text">ACTIVITIES FOR THE SOUL</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block3">
            <div class="b3-text-group">
                <div class="can-my-pc">HOW DO I GET IT?</div>
                <div class="system-req">CONDITIONS OF SALE</div>
            </div>
            <table class="sys-req">
                <tr>
                    <td>
                        <div class="td-header">DATE:</div>
                        <div class="td-content">
                            2 days after purchase
                        </div>
                    </td>
                    <td>
                        <div class="td-header">DELIVERY SERVICES:</div>
                        <div class="td-content">
                            СДЭК, Почта России
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="td-header">DOCUMENTS TO RECEIVE:</div>
                        <div class="td-content">
                            Parcel number and passport
                        </div>
                    </td>
                    <td>
                        <div class="td-header">PAYMENT VIA:</div>
                        <div class="td-content">
                            The bank's mobile application
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="td-header">REFUND:</div>
                        <div class="td-content">
                            Not subject to
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="block4">
            <div class="b4-text">
                <div class="what-people-think">what people think?</div>
                <div class="press-quotes">press quotes</div>
                <div class="press-quotes-desc">
                    Our goal is to create a product and service that you’re satisfied with and use it every day. This is
                    why we’re constantly working on our services to make it better every day and really listen to what
                    our users has to say.
                </div>
                <a href="reviews/reviews.html"><div class="buy-btn">Read More</div></a>
            </div>
            <div class="b4-quotes">
                <div class="quote">
                    <div class="user-info">
                        <div class="left-text">
                            <img src="img/photo1.png" alt="" class="user-ico">
                            <div class="user-name-group">
                                <div class="user-name">Anna Stepanova</div>
                                <div class="user-pos">illustrator</div>
                            </div>
                        </div>
                        <img src="img/telegram.png" alt="" class="twitter-ico">
                    </div>
                    <div class="comment-text">“The images on the maps are pleasing to the eye”</div>
                    <div class="when">January 15, 2024</div>
                </div>
                <div id="one" class="quote">
                    <div class="user-info">
                        <div class="left-text">
                            <img src="img/photo2.png" alt="" class="user-ico">
                            <div class="user-name-group">
                                <div class="user-name">Rusakova Emilia</div>
                                <div class="user-pos">tarotologist</div>
                            </div>
                        </div>
                        <img src="img/telegram.png" alt="" class="twitter-ico">
                    </div>
                    <div class="comment-text">“Cards of amazing quality, fast and convenient delivery”</div>
                    <div class="when">June 1, 2024</div>
                </div>
                <div id="sec" class="quote">
                    <div class="user-info">
                        <div class="left-text">
                            <img src="img/photo3.png" alt="" class="user-ico">
                            <div class="user-name-group">
                                <div class="user-name">Lapina Victoria</div>
                                <div class="user-pos">collector</div>
                            </div>
                        </div>
                        <img src="img/telegram.png" alt="" class="twitter-ico">
                    </div>
                    <div class="comment-text">“I found everything I dreamed of here”</div>
                    <div class="when">October 18, 2018</div>
                </div>
            </div>
        </div>
        <div class="block5">
            <div class="b5-content">

                <img src="img/подарок.jpg" alt="" class="skull">
                <div class="b5-text">
                    <div class="subtitle">Want to stay in touch?</div>
                    <div class="title">newsletter SUBSCRIBE </div>
                    <div class="desc">In order to start receiving our news, all you have to do is enter your email
                        address. Everything else will be taken care of by us. We will send you emails containing
                        information about game. We don’t spam.</div>
                    <div class="input-and-btn">
                        <input placeholder="your email" type="text" class="email-papper">
                        <a href="me/me.html" class="sub-now-btn">
                            Subscribe
                        </a>
                        <a href="me/me.html" class="sub-now-btn">
                            Log in
                        </a>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="footer-group-1">
                    <img src="img/logo.png" alt="" class="footer-logo"></img>
                    <div class="footer-nav">
                        <a href="index.html">
                            <div class="nav-item">MAIN</div>
                        </a>
                        <a href="catalog/catalog.html">
                            <div class="nav-item">CATALOG</div>
                        </a>
                        <div class="nav-item">TAROT FEATURES</div>
                        <div class="nav-item">CONDITIONS OF SALE</div>
                        <div class="nav-item">quotes</div>
                        <a href="basket/basket.html"><div class="nav-item">buy</div></a>
                    </div>
                    <div class="footer-soc">
                        <img class="footer-soc-item" alt="" src="img/telegram.png"></img>
                        <img class="footer-soc-item" alt="" src="img/vk.png"></img>
                    </div>
                </div>
                <div class="stick"></div>
                <div class="footer-group-2">
                    <div class="footer-text copyright"> © 2018 Outpost Games, Inc. All Rights Reserved</div>
                    <div class="footer-text">Privacy Policy | Terms of Services | Code of Conduct </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="index.js"></script>

</html>